@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600";

/**** Shared styles ****/
html {
	height: 100%;
}

body {
	margin: 0px;
	min-height: 100%;
	/* IE fallback */
	display: flex;
	flex-flow: row wrap;
}

body, input, select, textarea {
	color: #9a9a9a;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-weight: 400;
	line-height: 1.65;
}

.logo {
	grid-area: logo;
	background: url("../images/HVH-logo.png") no-repeat center center;
	background-size: contain; 
	background-color: rgb(220,220,220);
	height: 75px;
	flex: 1 100%;
	opacity: 0.9;
}

div.menu {
	grid-area: menu;
	display: flex;
	align-items:bottom;
	background-color: rgb(220,220,220);	
	color: #000;
	height: auto;
	flex: 3 100%;
	opacity: 0.9;
}

.content {
	grid-area: content;
	/* min-height: 400px; */
	padding: 10px 50px 10px 50px;
	flex: 1 100%;
}

.header {
	grid-area: header;
	background: rgba(220,220,220,0);
}

.header-background {
	/*background-image: url("../images/HVH-header.jpg");*/
	background-size: cover;
	background-position: center bottom -1px;
	grid-column-start: logo;
	grid-column-end: span menu;
	grid-row-start: logo;
	grid-row-end: span 2;
	flex: 1 100%;
	animation: round 24s infinite;
	opacity: 0;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ hacks/workarounds */
	.header-background {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 337px;
		margin-bottom: 100px;
	}
	
	div.content {
		padding-top: 100px;
	}
}

@keyframes round {
  25% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
}

.header-background.hb1 {
	background-image: url("../images/HVH-header-red.jpg");
	animation-delay: 16s;
}

.header-background.hb2 {
	background-image: url("../images/HVH-header-green.jpg");
	animation-delay: 8s;
}

.header-background.hb3 {
	background-image: url("../images/HVH-header-blue.jpg");
	animation-delay: 0s;
}

.footer {
	grid-area: footer;
	flex: 1 100%;
	padding: 0px 50px 0px 50px;
	margin-top: 100px;
	border-top: 1px solid rgb(154,154,154);
}

body.wrapper {
	background-color: transparent;
	/*color: #000;*/
}

.content-wrapper {
	width: 100%;
}

.header,
.footer {

}

/*** Menu ***/
nav.menu {
	height: auto;
	width: 100%;
	margin-top: auto;
	padding: 0px 25px;
}

ul#menu {
	display: flex;
	justify-content: space-between;
	margin:0px;
	padding: 0px;
    list-style:none;
	height: auto;
	width: 100%;
}

nav.menu ul#menu {	
	list-style-type: none;
	-webkit-font-smoothing: antialiased;
}

nav.menu a {
	display: inline;
	margin: 0 5px;
	font-size: 1em;
	font-weight: 300;
	color: #000;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	/* font-family: 'Liberation Sans Regular'; */
}

nav.menu a:hover {
	border-bottom: 3px solid #FF81AE;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide it */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

wrapper > article {
	flex: 1;
}

article.tease {	
	margin: 30px 0px;
	
	-webkit-flex-basis: 33%; /* Safari 6.1+ */
    flex-basis: 33%;
}

article.tease h2, article.tease p {
	padding: 0px 15px;
}

body.home div.wrapper {
	/* IE fallback */
	display: flex;
	flex-wrap: wrap;
			
	/* Standard compliant browsers */
	display: grid;
	grid-template-columns: repeat(1, auto);
}

/****  General styling ****/
h1, h2.h2, h2.h2 a, h3, h4, h5, h6 {
	color: #9a9a9a;
    font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-weight: 300;
	text-decoration: none;
	color: rgb(85,85,85);
}

h1 {
	font-size: 1.5em;
}

h2 {
	font-size: 1.4em;
}

h3 {
	font-size: 1.3em;
}

h4 {
	font-size: 1.2em;
}

h5 {
	font-size: 1.1em;
}

a {
	text-decoration: none;
	color: rgb(142,186,214);
}

p, span {
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-weight: 300;
	color: rgb(154,154,154);
}

div.listing-item a {
	display: block;	
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-weight: 300;
	text-decoration: none;
	font-size: 1.5em;
	color: rgb(85,85,85);
	margin-bottom: 20px;
}

div.wrapper-medewerkers-home {
	text-align: center;
}

div.wrapper-medewerkers-home div.listing-item {
	margin: auto;
	padding: 30px 30px;
	display: inline-block;
}

div.listing-item a img {
	border: 1px solid rgb(85,85,85);
	border-radius: 50%;
	height: 150px;
	width: 150px;
}

span.excerpt-dash {
	display: none;
}

body.home .article-body > div,
ul.eo-events {
	padding-top: 50px;
	border-top: 1px solid rgb(154,154,154);
}

/***  home ***/
body.home .event-list-view .event .event-date { margin: 0.6em 0.6em 0.6em 0em; }
body.home .event-list-view .event .event-info { margin: 0px; }
body.home .event-list-view .event .event-info .event-details { font-size: 16px; }
body.home .event-list-view .event .event-info .event-details p img { display: none; }
body.home .event-list-view .event .event-title h3 a { font-size: 24px; font-weight: 300; }

/*** footer ***/
footer {
	background-color: rgb(142,186,214);	
}

footer p, footer a {
	color: rgb(255,255,255);
}

p.footertext {
	display: inline;
	float: left;
}

.footer ul.icons {
	display: inline;
	float: right;
}

ul.icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
}

ul.icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}

ul.icons li:last-child {
	padding-right: 0;
}

ul.icons li .icon:before {
	font-size: 2em;
}

.eo-events .event_excerpt img {
	float: right;
	object-fit: cover;
	position: relative;
	height: 150px;
	width: 150px;
	margin-left: 25px;
	border: 1px solid rgb(85,85,85);
	border-radius: 50%;
}


/*** Article ***/
.article-content img {
	float: right;
}

.article-content section {
	float: left;
}

/*** Activiteiten pagina ***/
.eo-events {
	list-style-type: none;
	padding-left: 0px;
}

.eventorganiser-event-meta {
	overflow: hidden;
}

.event_excerpt {min-height: 150px; }
.eo-events { font-size: 16px; }
.eo-events a.event_link { font-size: 24px; font-weight: 300; }

.eventorganiser-event-meta hr,
.eventorganiser-event-meta h4:first-of-type {
	display: none;
}

.article-content img.featured-image {
	float: right;
	object-fit: cover;
	/*position: relative;*/
	height: 300px;
	width: 300px;
	margin-left: 25px;
	border: 1px solid rgb(85,85,85);
	padding: 0px;
	border-radius: 50%;
}

ul.eo-event-meta {
	list-style: none;
	padding-left: 0px;
}

/*** Medewerkers pagina ***/
.wrapper-medewerkers .listing-item {
	padding: 10px 0px 50px 0px;
}

.wrapper-medewerkers .listing-item a.image {
	float: left;
	padding-right: 50px;
}

.featured-image {
	float: right;
	padding: 50px;
	display: block;
	max-width:25vw;
	max-height:25vw;
	width: auto;
	height: auto;
}

ul.event-list-view li.event {
	margin-bottom: 50px;
}

.wrapper-medewerkers .medewerkers-intro .more-link {
	text-align: right;
}

/*** Huizen pagina ***/
.wrapper-huizen {
	display: flex;
	flex-wrap: wrap;
	width: auto;
}

.wrapper-huizen .listing-item {
	padding: 10px 25px 50px 25px;
	flex-grow: 1;
}

.wrapper-huizen .listing-item a {
	text-align: center;
}

.wrapper-huizen .listing-item a.image img {
	float: none;
}

/* put a border below events */
.eo-events {
	border-bottom: 1px solid rgb(154,154,154);
	padding-bottom: 50px;
}

/* except on the homepage */
.home .eo-events {
	border-bottom: none;
	padding-bottom: none;
}

.home .wrapper-huizen .listing-item a.image {
	float: left;
	padding-right: 50px;
}

/*** Comment form ***/
div.comment-form {
	width: 88%;
	min-width: 200px;
	max-width: 400px;
}

/***  Form styling ***/
/* Fix stacking context with off-canvas menu */
.wpcf7-form-control-wrap { 
	position: static; 
}

div.wpcf7 {
	padding: 0em 2em 0em 0em;
	margin: 0em 2em 0em 0em;
}

form.wpcf7-form input::placeholder , form.wpcf7-form textarea::placeholder, 
form.comment-form input::placeholder , form.comment-form textarea::placeholder {
	opacity: 0.4;
}

form.wpcf7-form input::-webkit-input-placeholder , form.wpcf7-form textarea::-webkit-input-placeholder,
form.comment-form input::-webkit-input-placeholder , form.comment-form textarea::-webkit-input-placeholder { 
	opacity: 0.4;
}

form.wpcf7-form input:-ms-input-placeholder  , form.wpcf7-form textarea:-ms-input-placeholder,
form.comment-form input:-ms-input-placeholder  , form.comment-form textarea:-ms-input-placeholder { 
	opacity: 0.4;
}

form.wpcf7-form input::-ms-input-placeholder , form.wpcf7-form textarea::-ms-input-placeholder,
form.comment-form input::-ms-input-placeholder , form.comment-form textarea::-ms-input-placeholder { 
	opacity: 0.4;
}

form.wpcf7-form input.wpcf7-text, form.wpcf7-form textarea.wpcf7-textarea,
form.comment-form input[type="text"], form.comment-form textarea {
	padding: 0.3em 1em;
	width: 100%;
}

form.wpcf7-form input[type="submit"],
form.comment-form input[type="submit"] {
	padding: 0.3em 5em;
	background-color: rgb(90,90,90);
	border: 1px solid rgb(85,85,85);
	color: rgb(255,255,255);
	
	font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.huizen-contact {
	list-style-type: none;
}

.huizen-contact li::before {
	content: "\002022  ";
}


/*** Comments ***/
section.comment-box {
	border-top: 1px solid rgb(95,95,95);
	margin-top: 50px;
}

.comment-author {
	margin: 0px;
}

.comment-content p {
	margin: 0px 0px 35px 0px;
}

/****  Screen width specific styles ****/

/* 1-624px width */
@media only screen and (min-width: 1px) and (max-width: 624px) {
	body.wrapper {
		display: grid;
		grid-gap: 0;
		grid-template-columns: 1fr;
		grid-template-rows: 50px 50px 0px auto auto;
		grid-template-areas:
		 "logo"
		 "menu"
		 "header"
		 "content"
		 "footer";		
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	/* Smaller margins */
	.content {
		padding: 10px 10px 10px 10px;
	}
	
	/* Smaller input text, smaller margins  */
	input, select, textarea {
		font-size: 12pt;
	}
	
	form.wpcf7-form input.wpcf7-text, form.wpcf7-form textarea.wpcf7-textarea {
		padding: 0.1em 0.3em;
		max-width: 90vw;
	}
	
	/* remove paddings around the form to maximize screen usage */
	div.wpcf7 {
		padding: 0em;
		margin: 0em;
	}
		
	.event-details p img {
		display: none;
	}
	
	article.tease {	
		margin: 30px 0px;	
		-webkit-flex-basis: 100%; /* Safari 6.1+ */
		flex-basis: 100%;
	}
	
	.header-background {
		height: 0px;
	}
	
	.logo, div.menu {
		background-color: rgba(220,220,220,0);
	}
	
	div.menu {
		opacity: 1;
	}
	
	/*** Hamburger menu for small screens ***/	
	nav.menu {
		height: auto;
		width: 100%;
		margin-top: auto;
		padding: 0px 25px;
	}

	nav.menu a {
		display: inline;
		margin: 0 5px;
		font-size: 1em;
		font-weight: 300;
		color: #000;
		text-decoration: none;
		border-bottom: 3px solid transparent;
		font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
		text-transform: uppercase;
		/* font-family: 'Liberation Sans Regular'; */
	}

	nav.menu a:hover {
		border-bottom: 3px solid #FF81AE;
	}
	
	
	#menuToggle
	{
	  display: block;
	  position: relative;
	  top: -10px;
	  left: -10px;	  
	  z-index: 1;	  
	  -webkit-user-select: none;
	  user-select: none;
	  
	  width: 33px;
	  /*background-color: rgba(85, 85, 85, 0.25);*/
	  padding: 10px 10px 4px 10px;
	}

	#menuToggle input
	{
	  display: block;
	  width: 40px;
	  height: 32px;
	  position: absolute;
	  top: -7px;
	  left: -5px;	  
	  cursor: pointer;	  
	  opacity: 0; /* hide this */
	  z-index: 2; /* and place it over the hamburger */	  
	  -webkit-touch-callout: none;
	}

	/*
	 * Just a quick hamburger
	 */
	#menuToggle span
	{
	  display: block;
	  width: 33px;
	  height: 4px;
	  margin-bottom: 5px;
	  position: relative;	  
	  background: rgb(85,85,85);
	  border-radius: 3px;	  
	  z-index: 1;	 
	  transform-origin: 4px 0px;	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
				  opacity 0.55s ease;
	}

	#menuToggle span:first-child
	{
	  transform-origin: 0% 0%;
	}

	#menuToggle span:nth-last-child(2)
	{
	  transform-origin: 0% 100%;
	}

	/* 
	 * Transform all the slices of hamburger
	 * into a crossmark.
	 */
	#menuToggle input:checked ~ span
	{
	  opacity: 1;
	  transform: rotate(45deg) translate(-2px, -1px);
	  background: #232323;
	}

	/*
	 * Let's hide the middle one.
	 */
	#menuToggle input:checked ~ span:nth-last-child(3)
	{
	  opacity: 0;
	  transform: rotate(0deg) scale(0.2, 0.2);
	}

	/*
	 * The last one should go the other direction
	 */
	#menuToggle input:checked ~ span:nth-last-child(2)
	{
	  transform: rotate(-45deg) translate(0, -1px);
	}

	/*
	 * Make this absolute positioned
	 * at the top left of the screen
	 */
	ul#menu
	{
	  flex-direction: column;
	  justify-content: flex-start;
	  position: absolute;
	  width: auto;
	  height: 100vh; 
	  margin: -100px 0 0 -50px;
	  padding: 50px;
	  padding-top: 100px;
	  border-right: 1px solid rgb(85,85,85);	 
	  border-bottom: 1px solid rgb(85,85,85);
	  background: #fff;
	  list-style-type: none;
	  -webkit-font-smoothing: antialiased;	  
	  /* to stop flickering of text in safari */	  
	  
	  transform-origin: 0% 0%;
	  transform: translate(-100%, 0);	  
	  transition: transform 0.5s cubic-bezier(0.77,0.2,0.25,1.0);
	}

	#menu li
	{
	  padding: 10px 0;
	  font-size: 22px;
	}

	/*
	 * And let's slide it in from the left
	 */
	#menuToggle input:checked ~ ul
	{
	  transform: none;
	}	
	
	.featured-image {
		max-width:50vw;
		max-height:50vw;
	}
}

/* 625-799px width */
@media only screen and (min-width: 625px) and (max-width: 799px) {
	body.wrapper {
		display: grid;
		grid-gap: 0;
		grid-template-columns: minmax(210px,0.7fr) 1.3fr;
		grid-template-rows: 65px 100px auto auto;
		grid-template-areas:
			"logo menu"
			"header header"
			"content content"
			"footer  footer";
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		}
		
	body.home .event-list-view  {
		/* IE/EDGE fallback */
		display: flex;
		flex-wrap: wrap;
		
		/* Standard compliant browsers */
		display: grid;
		grid-template-columns: repeat(2, auto);
	}

	article.tease {	
		margin: 30px 0px;
		
		-webkit-flex-basis: 50%; /* Safari 6.1+ */
		flex-basis: 50%;
	}
		
	.header-background {
		height: 100px;
	}	
	
	ul#menu {
		padding: 0px 0px;
	}
	
	nav.menu {		
		padding: 0px 0px;
	}
	
	nav.menu a {
		font-size: 2vw;
	}

}

/* 800px+ width */
@media only screen and (min-width: 800px)  {
	body.wrapper {
		display: grid;
		grid-gap: 0px;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 137px 200px auto auto;
		grid-template-areas:
		"logo menu menu"
		"header header header"
		"content content content"
		"footer  footer  footer";
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	body.home .event-list-view, 
	body.home .eo-events {
		/* IE/EDGE fallback */
		display: flex;
		flex-wrap: wrap;
		
		/* Standard compliant browsers */
		display: grid;
		grid-template-columns: repeat(3, auto);
	}
	
	 body.home .event-list-view .event,
	 body.home .eo-events li {	
		padding: 30px 30px;
		margin: 0px;

		-webkit-flex-basis: 33%; /* Safari 6.1+ */
		flex-basis: 33%;
	}	
	
	nav.menu a {
		font-size: 1.1em;
	}
		
	.logo {
		min-width: 325px;
	}
	
	.header-background {
		height: 200px;
	}
	
	div.wpcf7 {
		float: left;
		width: 50%;
	}
}

/* Grid overrides to fix IE/Edge deficiencies */
@supports (grid-area: auto) {
	.logo {
		height: auto;
	}
	
	.header-background {
		height: auto;
	}
}
